<!--
 * @description  : 实地核查
 * @descriptionDetail: 实地核查
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-09-27 09:58:58
-->
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <template>
      <u-sticky :enable="true">
        <view class="sticky">
          <u-search
            placeholder="请输入零售户"
            :clearabled="true"
            :show-action="true"
            action-text="搜索"
            :animation="true"
            v-model="formData.search"
            @custom="searchCustomer"
          >
          </u-search>
        </view>
        <view class="sticky" style="padding-bottom:10px;padding-top:0px;">
          <p style="font-size:14px;">
            本次筛选出
            <span style="font-weight:bold"> {{ totalCount }} </span>
            个零售户
          </p>
        </view>
      </u-sticky>
    </template>
    <me-table
      style="height:90%"
      :i="0"
      :index="0"
      :load-data="loadData"
      :init-load="false"
      ref="mescrollItem0"
    >
      <template #default="d">
        <view :class="'news-li li-' + d.index">
          <u-row gutter="12">
            <u-col span="1.5">
              <u-checkbox :name="d.data.licNo" v-model="d.data.checked" @change="checkboxChange"></u-checkbox>
            </u-col>
            <u-col span="9" class="top">
              {{ d.data.companyName }}
            </u-col>
          </u-row>
          <u-row gutter="12" style="margin-top:10px;">
            <u-col span="1.5">
            </u-col>
            <u-col span="9" class="middle">
              {{ d.data.businessAddr }}
            </u-col>
          </u-row>
          <u-row gutter="10" class="bottom" style="margin-top:5px;">
            <u-col span="1.5"></u-col>
            <u-col span="2" class="left">
              {{ d.data.managerName }}
            </u-col>
            <u-col span="0.5" class="middle">
              |
            </u-col>
            <u-col span="5" class="right">
              {{ d.data.retailTel }}
            </u-col>
          </u-row>
        </view>
      </template>
    </me-table>
    <view style="width:100%;height:6%;background-color:white;position:fixed;bottom:0rpx;z-index:999;font-size:16px;">
      <u-row gutter="16">
        <u-col span="3" text-align="center">
        </u-col>
        <u-col span="9" text-align="center">
          <u-button type="primary" size="medium" shape="circle" @tap="addAudit">
            加入核查
          </u-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>
<script>
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import fieldAuditService from "@/service/internal/fieldAudit.service.js";
export default {
  components: {meTable,},
  mixins: [MescrollMoreMixin,],
  data(){
    return{
      custAdd:"",
      itemchecked:false,
      totalCount: 0 ,
      checked: false,
      licNos:[],
      formData:{},
    };
  },
  methods:{
    loadData (page) {
      console.log("page.size", page.size, "page.num", page.num);
      return new Promise(resolve => {
        fieldAuditService.listRlic(page.num,page.size,this.formData).then((res) => {
          if(res.success){
            resolve({"data": res.data,});
            this.totalCount = res.count;
          }else{
            this.$u.toast(res.msg);
          }
        }).catch((error) => {
          this.$u.toast(error);
        });
      });
    },
    searchCustomer(){
      this.$refs.mescrollItem0.refresh();
    },
    checkboxChange(e){
      if(e.value == true){
        this.licNos.push(e.name);
      } else {
        // 取消勾选，删除元素
        for (let i = 0; i < this.licNos.length; i++) {
          if (this.licNos[i] == e.name) {
            this.licNos.splice(i,1);
          }
        }
      }
      console.log(this.licNos);
    },
    // 加入核查
    addAudit(){
      this.$u.loading("添加中...");
      fieldAuditService.addToCheck(this.licNos).then((res) => {
        if(res.success){
          this.$u.hideLoading();
          this.$u.route("pages/internal/fieldAudit/index");
        }else{
          this.$u.toast(res.msg);
        }
      });
    },
    checkedAll(){
      this.listData.map(val => {
        val.checked = true;
      });
      this.checked = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.news-li{
		font-size: 32rpx;
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;
	}
	.news-li .new-content{
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		color: #666;
	}
  /deep/ .u-sticky{
    top: 0 !important;
  }
  .top{
    font-size: 18px;
    font-family: ".PingFang SC";
    font-weight: 600;
    color: #333333;
    opacity: 1;
  }
  .middle{
    font-size: 14px;
    font-family: ".PingFang SC";
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }
  .bottom .left{
    font-size: 16px;
    font-family: ".PingFang SC";
    font-weight: 600;
    color: #666666;
    opacity: 1;
  }
  .bottom .middle{
    opacity: 1;
    border-radius: 0px;
  }
  .bottom .right{
    font-size: 16px;
    font-family: ".PingFang SC";
    font-weight: 600;
    color: #027AFF;
    opacity: 1;
  }
  .sticky {
		width: 750rpx;
		padding: 24rpx 45rpx;
    background-color: white;
	}
</style>
